import { XmPullRefresh } from "@/components/tool";
import { observer } from "mobx-react";
import React, { Fragment, useEffect } from "react";
import { Flex } from "@taroify/core"
import { View, RichText } from "@tarojs/components"
import { XmImage, XmNoData } from "@/components/tool";
import { Router } from "@/path/router";
import { getMessageList } from '@path/api/message/index'
import Navbar from "@/components/ui/navbar";
import { usePagingQuery } from "@/path/hooks";
import './index.scss'
function Index() {
  const { pagingInfo, initPagingQuery, loadPagingMore } = usePagingQuery<any, any>(getMessageList, {})
  const viewMessage = (id) => {
    // 路由跳转至详情页
    Router.toMessageView({ msgId: id })
  }
  useEffect(() => {
    initPagingQuery(false)
  }, [])
  return <>
    <View className="message-nav">
      <Navbar showIcon={true} titleClassName="message-nav-title" title={'消息'} />
    </View>
    <XmPullRefresh refresherLoading={pagingInfo.refresherLoading} onRefresh={initPagingQuery} onToLower={loadPagingMore} className="message">
      {pagingInfo.list.map((item) => (
        <View className="message-list" onClick={() => viewMessage(item.id as number | string)}>
          <Flex align="center">
            <Flex.Item span={4}>
              <View>
                <XmImage className="message-img" src={'ling.png'} static />
              </View>
            </Flex.Item>
            <Flex.Item span={14}>
              <View className="message-title one-ellipsis">{item.title}</View>
              <RichText className="message-content one-ellipsis" nodes={item.content}></RichText>
            </Flex.Item>
            <Flex.Item span={6} className="message-right">
              <View className="message-time">{item.createTime}</View>
            </Flex.Item>
          </Flex>
          {item.status == 0 ?
            <View className="message-read"></View> : null}
        </View>
      ))}
      {pagingInfo.list.length == 0 ?
        <XmNoData {...pagingInfo} title="暂无数据" /> : <></>
      }
    </XmPullRefresh>
  </>
}

const Higher = React.memo(observer(Index));
export default () => <Fragment><Higher /></Fragment>
